<template>
  <div>
    <div class="pic_container" @scroll="toScroll">
      <div v-for="picture in pictures" :key="picture" class="pic-container-evePic">
        <img ref="refImg" :src="picture" :alt="picture" class="pic-container-innerPic" @error="handlePicError">
        <div class="pic-container-innerBack">
          <i class="el-icon-check" @click="copyToClipboard(picture)" />
          <i class="el-icon-delete" @click="deletePic(picture)" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { deletePic, getPic } from '@/api/file'
import MyLoading from '@/components/myComponent/Myloading/MyLoading'
import Loading from '@/views/loading/loading'

export default {
  name: 'Index',
  components: { Loading, MyLoading },
  data: function() {
    return {
      pictures: [],
      limit: 15,
      page: 1,
      isAchiveBottom: false,
      loading: false
    }
  },
  created() {
  },
  beforeMount() {
    this.getPics(this.page, this.limit)
  },
  methods: {
    toScroll() {
      const _this = this
      const doc = _this.$el.querySelector('.pic_container')
      console.log('scrollTop' + doc.scrollTop)
      console.log('scrollHeight' + doc.scrollHeight)
      console.log('clientHeight' + doc.clientHeight)
      console.log('offsetTop' + doc.offsetTop)
      // 距离顶部的距离，也就是被下拉的距离
      var scrollTop = doc.scrollTop
      // clientHeight 表示该元素的原来的高度
      var windowHeight = doc.clientHeight
      // 变量scrollHeight是滚动条的总高度，也就是可视范围+被隐藏的可滑动返回
      var scrollHeight = doc.scrollHeight
      // 滚动条到底部的条件(距底部20px时触发加载)
      if (
        scrollTop + windowHeight >= scrollHeight - 20 &&
        !this.isAchiveBottom
      ) {
        // console.log(
        //   "距顶部" +
        //     scrollTop +
        //     "可视区高度" +
        //     windowHeight +
        //     "滚动条总高度" +
        //     scrollHeight
        // );
        this.isAchiveBottom = true
        // 延时触发数据加载
        this.loading = true
        setTimeout(() => {
          // 后端需要进行分页，然后前端从后端拿来实现滚动加载
          // 这里利用数组push来模拟从后端拿到的数据
          ++this.page
          this.isAchiveBottom = false
          this.getPics(this.page, this.limit)
        }, 500)
      }
    },
    getPics(page, limit) {
      this.loading = true
      getPic({ page, limit }).then((res) => {
        console.log(res)
        for (const data of res.data.data.list) { this.pictures.push(data) }
        if (res.data.data.total <= this.pictures.length) {
          this.isAchiveBottom = true
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 处理图片加载错误
    handlePicError(e) {
      e.target.src = require('../../../assets/img/errorImg.jpeg')
    },
    // 删除一个图片
    deletePic(url) {
      this.$confirm('确定要删除链接为' + url + '的图片吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePic({ url }).then((res) => {
          const number = this.pictures.indexOf(url)
          this.pictures.splice(number, 1)
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
        })
      })
    },
    // 复制图片链接到粘贴板
    copyToClipboard(s) {
      if (window.clipboardData) {
        window.clipboardData.setData('text', s)
      } else {
        (function(s) {
          document.oncopy = function(e) {
            e.clipboardData.setData('text', s)
            e.preventDefault()
            document.oncopy = null
          }
        })(s)
        document.execCommand('Copy')
        this.$message({
          message: '复制成功！',
          type: 'success'
        })
      }
    }
  }
}
</script>

<style scoped>
.pic-main-window{
  position: relative;
}
.pic_container {
  height: 880px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.pic-container-evePic {
  position: relative;
  display: inline-block;
  padding-left: 30px;
}

.pic-container-innerPic{
  height: 340px;
  width: 530px;
}
.pic-container-innerBack {
  width:0 ;
  height: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: center;
  background: rgba(59, 60, 61, 0.5);
  opacity: 0;
  transition:height 0.77s;
  align-items: center;
  display: grid;
  grid-template-columns: 50% 50%;
}
.pic-container-innerPic:hover + .pic-container-innerBack {
  opacity: 1;
  width: 530px;
  height: 340px;
  line-height: 40px;
}
.el-icon-delete {
  justify-self: left;
  margin-left: 20px;
}
.el-icon-check{
  justify-self: right;
  margin-right: 20px;
}
.pic-container-innerBack i {
  font-size: 40px;
  cursor: pointer;
}

.pic-container-innerBack:hover{
  opacity: 1;
  width: 530px;
  height: 340px;
  line-height: 40px;
}
</style>
